import React, { useState } from 'react';
import { Card, Row, Col, Input, Button, Modal, Typography, Tag, Space, Tooltip } from 'antd';
import { StarOutlined, StarFilled, SearchOutlined, LinkOutlined, InfoCircleOutlined, GiftOutlined } from '@ant-design/icons';

const { Title, Text, Paragraph } = Typography;

// 模拟插件数据，去除热度字段
const PLUGINS = [
  {
    id: 1,
    name: '智能翻译助手',
    desc: '支持多语言实时翻译，适用于跨境沟通。',
    url: 'https://plugin.example.com/translate',
    tags: ['NLP', '翻译', 'AI'],
    free: true
  },
  {
    id: 2,
    name: '知识问答机器人',
    desc: '基于大模型的智能问答插件，支持多领域知识。',
    url: 'https://plugin.example.com/qa',
    tags: ['问答', '知识库', 'AI'],
    free: false
  },
  {
    id: 3,
    name: '智能写作助手',
    desc: '辅助内容创作，自动生成高质量文本。',
    url: 'https://plugin.example.com/writing',
    tags: ['写作', '内容生成', 'AI'],
    free: true
  },
  {
    id: 4,
    name: '图片识别OCR',
    desc: '图片文字识别，支持多种图片格式。',
    url: 'https://plugin.example.com/ocr',
    tags: ['OCR', '图像识别', 'AI'],
    free: false
  },
  {
    id: 5,
    name: '语音转文字',
    desc: '高精度语音识别，快速转写文本。',
    url: 'https://plugin.example.com/asr',
    tags: ['语音识别', 'ASR', 'AI'],
    free: true
  },
];

const PluginCard = ({ plugin, isFavorite, onFavorite, onDetail }: any) => (
  <Card
    hoverable
    title={
      <Space>
        {plugin.name}
        {plugin.tags.map((tag: string) => (
          <Tag key={tag} color="blue">{tag}</Tag>
        ))}
        {plugin.free && <Tag color="green" icon={<GiftOutlined />}>免费试用</Tag>}
      </Space>
    }
    extra={
      <Tooltip title={isFavorite ? '取消收藏' : '收藏'}>
        <Button
          type="text"
          icon={isFavorite ? <StarFilled style={{ color: '#faad14' }} /> : <StarOutlined />}
          onClick={e => { e.stopPropagation(); onFavorite(plugin.id); }}
        />
      </Tooltip>
    }
    style={{ minHeight: 200, borderRadius: 10, boxShadow: '0 2px 8px #f0f1f2' }}
    onClick={() => onDetail(plugin)}
  >
    <Paragraph ellipsis={{ rows: 2 }}>{plugin.desc}</Paragraph>
    <div style={{ color: '#888', fontSize: 13, marginTop: 8 }}>
      <LinkOutlined /> {plugin.url}
    </div>
  </Card>
);

const PluginCenter: React.FC = () => {
  const [search, setSearch] = useState('');
  const [favorites, setFavorites] = useState<number[]>([]);
  const [detail, setDetail] = useState<any>(null);

  // 搜索过滤
  const filtered = PLUGINS.filter(
    p =>
      p.name.includes(search) ||
      p.desc.includes(search) ||
      p.tags.some(tag => tag.includes(search))
  );

  // 免费试用
  const freePlugins = filtered.filter(p => p.free);
  // 其他插件
  const otherPlugins = filtered.filter(p => !freePlugins.includes(p));

  // 收藏切换
  const toggleFavorite = (id: number) => {
    setFavorites(fav => fav.includes(id) ? fav.filter(fid => fid !== id) : [...fav, id]);
  };

  return (
    <div className="hide-scrollbar" style={{ padding: 24, maxHeight: 'calc(100vh - 120px)', overflowY: 'auto', overflowX: 'hidden' }}>
      {/* 大号搜索框，居中，圆角阴影 */}
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 40 }}>
        <Input
          placeholder="搜索插件名称、简介或标签..."
          prefix={<SearchOutlined />}
          allowClear
          value={search}
          onChange={e => setSearch(e.target.value)}
          style={{ width: 480, height: 48, borderRadius: 24, fontSize: 18, boxShadow: '0 2px 8px #f0f1f2' }}
        />
      </div>
      {/* 免费试用分区 */}
      <div style={{ marginBottom: 32 }}>
        <Title level={4} style={{ marginBottom: 20 }}><GiftOutlined style={{ color: '#52c41a' }} /> 免费试用</Title>
        <Row gutter={[24, 24]}>
          {freePlugins.length === 0 && (
            <Col span={24} style={{ textAlign: 'center', color: '#888' }}>
              <InfoCircleOutlined style={{ fontSize: 32, marginBottom: 8 }} />
              <div>暂无免费试用插件</div>
            </Col>
          )}
          {freePlugins.map(plugin => (
            <Col span={8} key={plugin.id}>
              <PluginCard
                plugin={plugin}
                isFavorite={favorites.includes(plugin.id)}
                onFavorite={toggleFavorite}
                onDetail={setDetail}
              />
            </Col>
          ))}
        </Row>
      </div>
      {/* 其他插件分区 */}
      {otherPlugins.length > 0 && (
        <div style={{ marginBottom: 32 }}>
          <Title level={4} style={{ marginBottom: 20 }}>更多插件</Title>
          <Row gutter={[24, 24]}>
            {otherPlugins.map(plugin => (
              <Col span={8} key={plugin.id}>
                <PluginCard
                  plugin={plugin}
                  isFavorite={favorites.includes(plugin.id)}
                  onFavorite={toggleFavorite}
                  onDetail={setDetail}
                />
              </Col>
            ))}
          </Row>
        </div>
      )}
      {/* 插件详情弹窗 */}
      <Modal
        open={!!detail}
        onCancel={() => setDetail(null)}
        footer={null}
        centered
        title={detail?.name || '插件详情'}
      >
        {detail && (
          <div style={{ padding: 8 }}>
            <Space direction="vertical" size="large" style={{ width: '100%' }}>
              <div>
                <Text strong>插件简介：</Text>
                <Paragraph>{detail.desc}</Paragraph>
              </div>
              <div>
                <Text strong>接入URL：</Text>
                <Paragraph copyable style={{ color: '#0960bd', marginBottom: 0 }}>{detail.url}</Paragraph>
              </div>
              <div>
                <Text strong>标签：</Text>
                {detail.tags.map((tag: string) => (
                  <Tag key={tag} color="blue">{tag}</Tag>
                ))}
              </div>
              {detail.free && <div><Tag color="green" icon={<GiftOutlined />}>免费试用</Tag></div>}
            </Space>
          </div>
        )}
      </Modal>
    </div>
  );
};

export default PluginCenter; 